<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function addEmp(){
				var empno = document.forms[0].empno.value;
				var ename = document.forms[0].ename.value;
				var sal = document.forms[0].sal.value;
				
				//创建一个tr对象
				var tr = document.createElement("tr");
				//把tr追加到table中
				document.getElementById("empTable").appendChild(tr);
				
				//创建一个td
				var td = document.createElement("td");
				//创建一个文本节点
				var text = document.createTextNode(empno);
				//把文本节点追加td中
				td.appendChild(text);
				//把td追加到tr中
				tr.appendChild(td);
				
				//创建一个td
				td = document.createElement("td");
				//创建一个文本节点
				text = document.createTextNode(ename);
				//把文本节点追加td中
				td.appendChild(text);
				//把td追加到tr中
				tr.appendChild(td);
				
				//创建一个td
				td = document.createElement("td");
				//创建一个文本节点
				text = document.createTextNode(sal);
				//把文本节点追加td中
				td.appendChild(text);
				//把td追加到tr中
				tr.appendChild(td);
				
				td = document.createElement("td");
				var btn = document.createElement("input");
				btn.value = "删除";
				btn.type = "button";
				
				btn.onclick =function(){
					if(confirm("是否删除？")){
						this.parentNode.parentNode.remove();
					}
				};
				td.appendChild(btn);
				tr.appendChild(td);
				//编辑
				btn = document.createElement("input");
				btn.value = "修改";
				btn.type = "button";
				btn.onclick = editEmp;
				td.appendChild(btn);
				tr.appendChild(td);
			}
			
			function editEmp(){
				//找到员工编号单元格
				var td = this.parentElement.previousElementSibling.previousElementSibling.previousElementSibling;
				//取出单元格文本
				var text = td.innerText;
				//创建一个文本框
				var input = document.createElement("input");
				//设置文本框内容
				input.value = text;
				//清除单元格原来内容
				td.innerHTML = "";
				//把文本框添加到单元格中
				td.appendChild(input)
				
				
				//找到员工编号单元格
				td = this.parentElement.previousElementSibling.previousElementSibling;
				//取出单元格文本
				text = td.innerText;
				//创建一个文本框
				input = document.createElement("input");
				//设置文本框内容
				input.value = text;
				//清除单元格原来内容
				td.innerHTML = "";
				//把文本框添加到单元格中
				td.appendChild(input)
				
				
				//找到员工编号单元格
				td = this.parentElement.previousElementSibling;
				//取出单元格文本
				text = td.innerText;
				//创建一个文本框
				input = document.createElement("input");
				//设置文本框内容
				input.value = text;
				//清除单元格原来内容
				td.innerHTML = "";
				//把文本框添加到单元格中
				td.appendChild(input)
				
				
				this.value = "保存"
				this.onclick = saveEmp;
			}
			function saveEmp(){
				var td = this.parentElement.previousElementSibling.previousElementSibling.previousElementSibling;
				var text = td.firstElementChild.value;
				td.innerHTML = "";
				tb.innerText = text;
				
				
				td = this.parentElement.previousElementSibling.previousElementSibling;
				text = td.firstElementChild.value;
				td.innerHTML = "";
				tb.innerText = text;
				
				
				td = this.parentElement.previousElementSibling;
				text = td.firstElementChild.value;
				td.innerHTML = "";
				tb.innerText = text;
				
				this.value = "修改";
				btn.onclick = editEmp;
			}
		</script>
	</head>
	<body>
		<form >
			员工编号:<input type="text" name="empno"/>
			员工姓名:<input type="text" name="ename"/>
			员工薪水:<input type="text" name="sal"/>
			<input type="button" value="添加" onclick="addEmp()"/>
			<hr >
			<table border="1" width="800" id="empTable">
				<tr><th>员工编号</th><th>员工姓名</th><th>员工薪水</th><th>操作</th></tr>
			</table>
		</form>
	</body>
</html>
